<template>
  <div class="cluster recovery">
    <a-card style="width: 100%; height: 100%">
      <p slot="title" class="cardTitles">
        <span>试卷列表</span>
      </p>
      <div class="formDiv">
        <a-form layout="inline">
          <a-form-item label="试卷名称">
            <a-input v-model="name" type="text" style="width: 180px" />
          </a-form-item>
          <a-form-item label="试卷类型">
            <a-select v-model="type" style="width: 180px">
              <a-select-option v-for="type in typeData" :key="type">
                {{ type }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="站段">
            <a-select v-model="section" style="width: 180px">
              <a-select-option v-for="section in sectionData" :key="section">
                {{ section }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="search">搜索</a-button>
          </a-form-item>
          <a-form-item>
            <a-button @click="reset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <div style="margin-top: 20px" class="table-content">
        <a-table
          bordered
          :columns="columns"
          :data-source="list"
          rowKey="id"
          :loading="loading"
          :pagination="pagination"
          @change="tableChangePage"
        >
          <template slot-scope="text, record" slot="action">
            <a class="tools" @click="detail(record)">编辑</a>
            <a class="tools" @click="preview(record)">预览</a>
            <a class="tools" @click="deletetd(record)">删除</a>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getTemplatesList,addTemplate,deleTemplate } from "@/api/templates";
import { paging } from "assets/js/mixin";
export default {
  mixins: [paging],
  data() {
    return {
      loading:false,
      name: "",
      id: "",
      type:"",
      section:"",
      typeData:["非正常行车"],
      sectionData:[],
      columns: [
        {
          title: "试卷id",
          dataIndex: "id",
          scopedSlots: { customRender: "id" },
        },
        {
          title: "试卷名称",
          dataIndex: "name",
        },
        {
          title: "试卷类型",
          dataIndex: "type",
        },
        {
          title: "创建人",
          dataIndex: "publisherName",
        },
        {
          title: "站段",
          dataIndex: "section",
        },
        {
          title: "创建时间",
          dataIndex: "createdAt",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      list: [],
      formLayout: {
        spanCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
    };
  },
  mounted () {
    this.getSection();
    this.getTemplatesData()
  },
  methods: {
    //获取组织站段信息
    getSection(){
      var treeArr = JSON.parse(localStorage.getItem("organization"))
      var sectionArr =[]
      for (const key in treeArr) {
            sectionArr.push(key);
      }
      this.sectionData = sectionArr
    },
    //获取试卷列表
    getTemplatesData(){
      this.loading = true;
      var params = {
        page: this.pageNum,
        limit: this.pageSize,
        section: this.section,
        name: this.name,
        type: this.type,
      };
      getTemplatesList(params)
        .then((res) => {
          this.list = res.data.papers;
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    //搜索
    search() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getTemplatesData();
    },
    //重置
    reset() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.section = "";
      this.name = "";
      this.type = "";
      this.getTemplatesData();
    },
    //页码操作
    tableChangePage(pagination){
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getTemplatesData();
    },
    detail(recode) {
      this.$router.push({ name: "testPaperCreate", query: { id: recode.id,type:1 } });
    },
    preview(recode){
     // this.$router.push({ name: "testPaperCreate", query: { id: recode.id,type:2 } });
     //this.$router.push({ name: "paperView", query: { id: recode.id} });
     const { href } = this.$router.resolve({
        path: `/paperView`,
        query: {
          id: recode.id
        }
      });
      window.open(href, "_blank");
    },
    deletetd(recode) {
      var _this = this;
      this.$confirm({
        title: "确定要删除该条职工信息吗？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          deleTemplate(recode.id)
            .then((res) => {
             if (res.code === 10002) {
                _this.$message.error(res.msg);
              } else if(res.code ===2){
                _this.$message.error(res.msg);
              }else {
                _this.$message.success("删除成功");
                _this.getTemplatesData();
              }
            })
            .catch((err) => {
              _this.$message.destroy();
              _this.$message.error(err);
            });
        },
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.formDiv {
  .lable {
    margin-right: 10px;
  }
}

.upload {
  float: right;
}

.recovery {
  height: 100%;
}

.table-content {
  height: calc(100% - 138px);
  overflow: auto;
}

.ant-card-body {
  height: 100%;
}
</style>